Classname - field with error
Description
The classname of the control that has the error. Leave blank for default class.
You can change the background CSS when a field has an error by naming a new CSS class in this property. You can then define the CSS class in the Local CSS definitions property in the CSS/SVG section of the UX Properties page.
Create a Component with Validation Errors
In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give this control the name and label of 'zip'.
Highlight the control. In the properties list on the right click the [...] button next to the 'Validation rules' property
In the Field Validation dialog chech the 'Enable rules' checkbox.
In the Text Format section make sure that the 'Allow digits' checkbox is checked. Click OK.
Click the [...] button next to the 'Validation Javascript' property.
Enter the following code into the 'Javascript for Client-side Validation of UX Control' dialog and click OK.
if(data.length !=5) return 'The zip code must be 5 digits in length.';
Run the component in Live Preview. Enter three digits into the zip field and then click in any area outside the field; you should see an error message and the field should turn red.
Assign a New CSS Class for 'Field with error'
On the UX Properties page go to the Validation and Error Reporting section. Click the 'Error style' property's dropdown and select 'Block'.
Click the row expander next to the 'Error style' property.
Next to the 'Classname - field with error' property type the name of a new CSS class that you wish to define, for example 'fieldError'.
Scroll down the UX Properties page to the CSS/SVG section. Click the [...] button next to the 'Local CSS definitions' property.
At the bottom of the CSS Editor click on the 'Code' tab.
In the 'Code' tab type the name of the CSS class you defined, in this case 'fieldError'. To define it as a CSS class place a period '.' in front of it and a pair of curly brackets after it {}
.fieldError {}
At the bottom of the CSS Editor click to open the 'Design' tab.
Highlight the CSS class you defined in the list on the left. Alter the classes CSS properties using the 'Property' settings on the left. Adjust the 'Background', 'Color','Font Family','Border', and 'Padding' settings. Click OK.
Run the component in Live Preview. Generate an error message. The field with the error in it should take on the CSS class you defined.
